<template>
  <div class="scroll-view" ref="scroll">
    <div class="scroll-wrap">
      <!-- 需要滚动的内容 -->
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'scroll-view',
  methods: {
    // y轴滚动到指定的位置
    scrollTo(y, hasAnimated){
      this.scroll.scrollTo(0, y, hasAnimated ?300 : 0);

    }
  },
  mounted() {
    // 创建滚动视图
    const scroll = this.scroll = new IScroll(this.$refs.scroll, {
      click: true, 
      tap: true,
      probeType: 3,
    });
    // 每一次触摸滚动之前刷新滚动视图
    scroll.on("beforeScrollStart", () => {
      scroll.refresh();
    });
    scroll.on('scroll', () => {
      this.$emit('scroll',scroll.y)
    })
  },
};
</script>

<style scoped>
.scroll-view {
  overflow: hidden;
}
/* .scroll-view .scroll-wrap {
} */
</style>
